
<html lang="en" style="height: 500px;" >

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=0.1,user-scalable=yes">

<title>建设中</title>

<style type="text/css">
	@charset "UTF-8";
	html, body {
	  margin: 0;
	  padding: 0;
	  width: 100%;
	  height: 100%;
	  background-color: #DB4D6D;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-family: "微軟正黑體";
	}
	
	.monster {
	  width: 110px;
	  height: 110px;
	  background-color: #E55A54;
	  border-radius: 20px;
	  position: relative;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	  cursor: pointer;
	  margin: 10px;
	  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
	  position: relative;
	  animation: jumping 0.8s infinite alternate;
	}
	.monster .eye {
	  width: 40%;
	  height: 40%;
	  border-radius: 50%;
	  background-color: #fff;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.monster .eyeball {
	  width: 50%;
	  height: 50%;
	  border-radius: 50%;
	  background-color: #0C4475;
	}
	.monster .mouth {
	  width: 32%;
	  height: 12px;
	  border-radius: 12px;
	  background-color: white;
	  margin-top: 15%;
	}
	.monster:before, .monster:after {
	  content: "";
	  display: block;
	  width: 20%;
	  height: 10px;
	  position: absolute;
	  left: 50%;
	  top: -10px;
	  background-color: #fff;
	  border-radius: 10px;
	}
	.monster:before {
	  transform: translateX(-70%) rotate(45deg);
	}
	.monster:after {
	  transform: translateX(-30%) rotate(-45deg);
	}
	.monster, .monster * {
	  transition: 0.5s;
	}
	.monster.blue {
	  background-color: #0C4475;
	  animation-delay: 0.5s;
	}
	.monster.blue .mouth, .monster.blue .eyeball {
	  background-color: #E55A54;
	}
	@keyframes jumping {
	  50% {
	    top: 0;
	    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
	  }
	  100% {
	    top: -50px;
	    box-shadow: 0px 120px 50px rgba(0, 0, 0, 0.2);
	  }
	}
	@keyframes eyemove {
	  0%,10% {
	    transform: translate(50%);
	  }
	  90%,100% {
	    transform: translate(-50%);
	  }
	}
	.monster .eyeball {
	  animation: eyemove 1.6s infinite alternate;
	}
	
	h2 {
	  color: white;
	  font-size: 40px;
	  margin-right: 50px;
	}
	
	h3 {
	  margin-top: 0;
	  opacity: 0.5;
	  color: white;
	}
	
	.pageLoading {
	  position: fixed;
	  width: 100%;
	  height: 100%;
	  left: 0;
	  top: 0;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background-color: #0C4475;
	  flex-direction: column;
	  transition: opacity 0.5s 0.5s;
	}
	.pageLoading.complete {
	  opacity: 0;
	}
	.pageLoading.complete .monster {
	  transform: scale(0.01) rotate(360deg);
	}
	
	.loading {
	  width: 200px;
	  height: 8px;
	  margin-top: 80px;
	  border-radius: 5px;
	  background-color: #fff;
	  overflow: hidden;
	  transition: 0.5s;
	}
	.loading .bar {
	  background-color: #E55A54;
	  width: 0%;
	  height: 100%;
	}
	
</style>
</head>
<body style="height: 500px;">

<div>
	<h2 class="monsterText">建设中。。。</h2>

</div>

<div class="monster">
	<div class="eye">
		<div class="eyeball"></div>
	</div>
	<div class="mouth"></div>
</div>
<div class="monster blue">
	<div class="eye">
		<div class="eyeball"></div>
	</div>
	<div class="mouth"></div>
</div>
<div class="pageLoading">
	<div class="monster">
		<div class="eye">
			<div class="eyeball"></div>
		</div>
		<div class="mouth"></div>
	</div>
	<div class="loading">
		<div class="bar"></div>
	</div>
</div>

<script type="application/javascript">
	var percent = 0
	
	function eatCount(){
	  document.querySelector(".monsterText").innerHTML = ("建设中...");
	  // $(".monsterText").html("We are<br>SQUARE<br>MONSTER!")
	}
	
	var timer = setInterval(function(){
	  // $(".bar").css("width",percent+"%")
	  document.querySelector(".bar").style.setProperty("width",percent+"%")
	  percent+=1
	  if (percent>100){
	    // $(".pageLoading").addClass("complete")
	    document.querySelector(".pageLoading").classList.add("complete");
	    setTimeout(eatCount,3000);
	    clearInterval(timer);
	  }
	},30)
	
</script>

</body>
</html>

